<template>
  <div class="image">
    <el-carousel
      v-if="visible"
      trigger="click"
      arrow="always"
      :autoplay="false"
      :loop="false"
      height="400px"
      :initialIndex="initialIndex"
    >
      <el-carousel-item v-for="urlItem in previewList" :key="urlItem">
        <el-image class="w-100% h-100%" :src="urlItem" fit="scale-down" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
const { previewList, url } = defineProps({
  url: String,
  previewList: {
    type: Array,
    default: () => [],
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const initialIndex = computed(() => {
  const index = previewList.findIndex((item) => item === url);
  return index === -1 ? 0 : index;
});
</script>

<style lang="scss" scoped>
.image {
  width: 300px;
  height: 400px;
  :deep() {
    .el-carousel__indicator {
      padding-bottom: 2px;
    }
    .el-carousel__button {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
    .el-carousel__arrow {
      background-color: #2a2930;
      width: 30px;
      height: 30px;
    }
    .el-carousel__arrow--left {
      left: 6px;
    }
    .el-carousel__arrow--right {
      right: 6px;
    }
  }
}
</style>
